<template>
  <el-dialog
    title="主办方信息"
    :visible.sync="visible"
    top="10vh"
    width="600px"
    class="dialog-sponsor"
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleCancel"
  >
    <el-form
      ref="dialogSponsorForm"
      label-position="right"
      :model="dataInfo"
      :rules="rules"
      label-width="100px"
      style="width: 100%"
    >
      <el-form-item label="主办方名称" prop="name">
        <el-input v-model="dataInfo.name" clearable size="small"></el-input>
      </el-form-item>
      <el-form-item label="微信分享图片">
        <el-row>
          <el-upload
            :action="uploadImgUrl"
            list-type="picture-card"
            :multiple="false"
            :limit="1"
            :headers="headers"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-success="handleUploadSuccess"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div>
            为达到最佳效果，除logo以外区域请镂空处理，最小宽度为300px,最小高度为100px。背景透明的png图片，且小于500KB
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="联系电话" prop="contactPhone">
        <el-input v-model="dataInfo.contactPhone" clearable size="small"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="contactEmail">
        <el-input v-model="dataInfo.contactEmail" clearable size="small"></el-input>
      </el-form-item>
      <el-form-item label="官方网址" prop="website">
        <el-input v-model="dataInfo.website" clearable size="small"></el-input>
      </el-form-item>
      <el-form-item label="主办方介绍" prop="description">
        <el-input type="textarea" v-model="dataInfo.description"></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-sponsor__footer" slot="footer">
      <el-button size="small" @click="handleCancel">取消</el-button>
      <el-button type="primary" size="small" @click="handleConfirm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addOrganizer, updateOrganizer } from '@/api/meetingManagement/organizer'
import {getToken} from "@/utils/auth";
export default {
  name: "DialogSponsor",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    printData: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    printData: {
      handler(val) {
        if(val) {
          this.dataInfo = {
            ...this.dataInfo,
            ...val
          }
          // 设置照片回显
          if (this.dataInfo.logoUrl) {
            this.fileList = [{
              name: 'logoUrl',
              url: this.dataInfo.logoUrl
            }]
            console.log("printData",this.fileList)
          }
        }
      }
    }
  },
  data() {
    return {
      dataInfo: {
        name: null,
        contactPhone: null,
        contactEmail: null,
        website: null,
        description: null,
        logoUrl: null
      },
      formQueryApi: addOrganizer,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      fileList: [],
      rules: {
        name: [
          { required: true, message: '请输入主办方名称', trigger: 'blur' }
        ],
        contactPhone: [
          { required: false, message: '请输入联系电话', trigger: 'blur'},
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的联系电话格式",
            trigger: "blur"
          }
        ],
        contactEmail: [
          { required: false, message: '请输入电子邮箱', trigger: 'blur'},
          {
            pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
            message: "请输入正确的电子邮箱格式",
            trigger: "blur"
          }
        ],
      }
    }
  },
  methods: {
    handleCancel() {
      this.$emit("update:visible", false);
    },
    handleConfirm() {
      this.$refs.dialogSponsorForm?.validate(async (valid) => {
        if(valid) {
          if (this.dataInfo.id) {
            this.formQueryApi = updateOrganizer
          }
          console.log("11111111111111111",this.dataInfo)
          const { code, msg } = await this.formQueryApi({
            ...this.dataInfo
          }).catch(() => ({}));
          if(code === 200) {
            this.$message.success(msg || "成功！");
            this.dataInfo = {
              name: null,
              contactPhone: null,
              contactEmail: null,
              website: null,
              description: null,
              logoUrl: null
            },
            this.$emit("refresh");
            this.handleCancel();
          } else {
            this.$message.error(msg || "出错！");
          }
        }
      })
    },
    beforeUpload(file) {
      let imageUrl = URL.createObjectURL(file);
      const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error('上传图片只能是 png/JPG/gif 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 3MB!');
      }
      return isJPG && isLt2M;
    },
    handleRemove() {
      this.dataInfo.logoUrl = null
      this.fileList = []
    },
    handleUploadSuccess(res, file) {
      if (res && res.data && res.data.path) {
        this.dataInfo.logoUrl = res.data.path;
        this.fileList = [{ name: file.name, url: res.data.path }]
      } else if (res && res.url) {
        this.dataInfo.logoUrl = res.url;
        this.fileList = [{ name: file.name, url: res.url }]
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.dialog-sponsor {
  ::v-deep {
    .el-dialog__body {
      padding: 10px 20px;
    }
  }
  &__footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
}
</style>
